
<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Conjugal a Wedding Flat Bootstrap Responsive Web Template | Home :: w3layouts</title>
<!--css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--css-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Conjugal  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--timer-->
<link rel="stylesheet" href="css/jquery.countdown.css" />
<!--timer-->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/numscroller-1.0.js"></script>
<!--js-->
<!--webfonts-->
<link href='//fonts.googleapis.com/css?family=Racing+Sans+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!--webfonts-->
<script src="js/responsiveslides.min.js"></script>
 <script>
    $(function () {
      $("#slider").responsiveSlides({
      	auto: true,
      	nav: true,
      	speed: 500,
        namespace: "callbacks",
        pager: true,
      });
    });
  </script>
 <!--startsmothscrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
<!--endsmothscrolling-->

</head>
<body>
	<div class="header" id="head">
		<div class="container">
			<div class="header-menu">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
						  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						  </button>
						  <div class="navbar-brand logo">
								<h1><a href="index.html">Conjugal</a></h1>
							</div>
						</div>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li class="active"><a href="index.html" data-hover="Home">Home </a></li>
								<li><a data-hover="About" href="about.html">About</a></li>
								<li><a data-hover="Photos" href="photos.html">Photos</a></li>
								<li><a  href="codes.html" data-hover="codes">Codes</a></li>
								<li><a data-hover="Contact" href="contact.html">Contact</a></li>
							</ul>
						</div><!-- /.navbar-collapse -->
					</div><!-- /.container-fluid -->
				</nav>
			<div class="clearfix"></div>
			</div>	
		</div> 
	</div>
		<!--header-->		
	<div class="banner-section">
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides" id="slider">
					<li>
					  <img src="images/ba1.jpg" alt="">
					  <div class="caption">
							<div class="cap">
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
							</div>
								<h3>WE ARE GETTING MARRIED</h3>
								<p>12<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>08<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>16</p>
							<div class="cap">
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
							</div>
					  </div>
					</li>
					<li>
					  <img src="images/ba2.jpg" alt="">
						<div class="caption">
							<div class="cap">
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
							</div>
								<h3>WE ARE GETTING MARRIED</h3>
								<p>12<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>08<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>16</p>
							<div class="cap">
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
							</div>
					  </div>
					</li>
					<li>
					  <img src="images/ba3.jpg" alt="">
						<div class="caption">
							<div class="cap">
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
							</div>
								<h3>WE ARE GETTING MARRIED</h3>
								<p>12<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>08<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>16</p>
							<div class="cap">
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
								<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
							</div>
					  </div>
					</li>
				</ul>
		  </div>
	  </div>
	</div>
		<div class="content">
			<!--welcome-->
			<div class="couple" id="couple">
				<div class="container">
					<h2 class="tittle"> Meet The Happy Couple</h2>
					<div class="couple-grids">
						<div class="col-md-6 couple-grid">
							<div class="couple-top">
								<div class="couple-img  multi-gd-text">
									<a href="photos.html"><img src="images/w1.jpg" class="img-responsive" alt=""></a>
								</div>
								<div class="couple-text hvr-wobble-bottom">
									<h6>GROOM</h6>
									<h4>Thomson</h4>
									<p>Maggie and I first met in Bristol. I’m sure she must have thought my fashion sense quite strange, especially as at the time I was wearing a bright orange hammock. The thing you hang between two trees to sleep on.</p>
								</div>
							</div>
						</div>
						<div class="col-md-6 couple-grid">
							<div class="couple-top">
								<div class="couple-img multi-gd-text">
									<a href="photos.html"><img src="images/w2.jpg" class="img-responsive" alt=""></a>
								</div>
								<div class="couple-text hvr-wobble-bottom">
									<h6>BRIDE</h6>
									<h4>Victoria</h4>
									<p>Maggie and I first met in Bristol. I’m sure she must have thought my fashion sense quite strange, especially as at the time I was wearing a bright orange hammock. The thing you hang between two trees to sleep on.</p>
								</div>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="countdown">
						<div id="counter"> </div>
						<script src="js/jquery.countdown.js"></script>
						<script src="js/script.js"></script>
					</div>
				</div>
			</div>
			<div class="lovers">
				<div class="container">
					<h3 class="tittle1">Timeline Of Love</h3>
					<div class="work-info"> 
						<div class="col-md-6 work-left"> 
							<h4>January 05, 2016</h4>
						</div>
						<div class="col-md-6 work-right"> 
							<div class="love-text">
							<h5><span class="glyphicon glyphicon-heart"> </span>The First Day We Met</h5>
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="work-info"> 
						<div class="col-md-6 work-right work-right2"> 
							<h4>January 09, 2016</h4>
						</div>
						<div class="col-md-6 work-left work-left2"> 
							<div class="love-text">
								<h5> Talking At The Cafe<span class="glyphicon glyphicon-heart"></span></h5>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="work-info"> 
						<div class="col-md-6 work-left"> 
							<h4>January 19, 2016</h4>
						</div>
						<div class="col-md-6 work-right"> 
							<div class="love-text">
								<h5><span class="glyphicon glyphicon-heart"> </span> Proposal Of Marriage</h5>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="work-info"> 
						<div class="col-md-6 work-right work-right2"> 
							<h4>January 29, 2016</h4>
						</div>
						<div class="col-md-6 work-left work-left2"> 
							<div class="love-text">
								<h5>Lovely Engagement<span class="glyphicon glyphicon-heart"></span></h5>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
	<!--lover-->
			<div class="count-down">
				<div class="container">
					<div class="count-grids">
						<div class="col-md-3 count-grid">
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='250' data-delay='.5' data-increment="100">250</div>
									<h5>GUESTS ATTENDING</h5>
							</div>
						</div>
						<div class="col-md-3 count-grid">
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='500' data-delay='.5' data-increment="100">500</div>
									<h5>GUESTS INVITED</h5>
							</div>
						</div>
						<div class="col-md-3 count-grid">
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='200' data-delay='.5' data-increment="100">200</div>
									<h5>BRIDE'S GUESTS</h5>
								</div>
						</div>
						<div class="col-md-3 count-grid">
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='250' data-delay='.5' data-increment="100">250</div>
									<h5>GROOM'S GUESTS</h5>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!--couples-->
			<div class="couples">
				<div class="container">
					<h3 class="tittle">Groomsmen & Bridesmaids</h3>
					<div class="couples-grids">
						<div class="col-md-6 couples-grid">
							<div class="col-md-7 couples-left">
								<h4>David Miller</h4>
								<p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. </p>
							</div>
							<div class="col-md-5 couples-right">
								<img src="images/w4.png" class="img-responsive" alt="">
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-md-6 couples-grid">
							<div class="col-md-5 couples-right">
								<img src="images/w5.png" class="img-responsive" alt="">
							</div>
							<div class="col-md-7 couples-left1">
								<h4>Kristen Lisa</h4>
								<p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. </p>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="couples-grids">
						<div class="col-md-6 couples-grid">
							<div class="col-md-7 couples-left">
								<h4>James Doe</h4>
								<p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. </p>
							</div>
							<div class="col-md-5 couples-right">
								<img src="images/w6.png" class="img-responsive" alt="">
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-md-6 couples-grid">
							<div class="col-md-5 couples-right">
								<img src="images/w7.png" class="img-responsive" alt="">
							</div>
							<div class="col-md-7 couples-left1">
								<h4>Martina</h4>
								<p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. </p>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!--couples-->
				<div class="attending" id="rsvp">
					<div class="container">
						<h3 class="tittle">Are You Attending?</h3>
						<div class="attened">
							<form action="#" method="post">
								<span>Your Name</span>
									<input type="text" Name="name" placeholder="" required>
								<span>Your Email</span>
									<input type="text" Name="name" placeholder="" required>
								<span>Ceremony & Party</span>
									<select class="ser">
										<option value="All Events">All Events</option>
										<option value="Ceremony">Wedding</option>
										<option value="Ceremony">Reception</option>
										<option value="Party">Party</option>
									</select>
								<span>Guest</span>
									<input type="text" Name="name" placeholder="" required>
									<input type="submit" value="I am attending">
							</form>
						</div>
					</div>	
				</div>
				<div class="details">
					<div class="container">
						<div class="details-grids">
							<div class="col-md-4 details-grid">
								<div class="icon">
									<i class="glyphicon glyphicon-music effect-1" aria-hidden="true"></i>
								</div>
								<h4>Bachelor Party</h4>
								<p>Maggie and I first met in Bristol. I’m sure she must have thought my fashion sense quite strange, especially as at the time I was wearing a bright orange hammock. </p>
							</div>
							<div class="col-md-4 details-grid">
								<div class="icon">
									<a href="contact.html"><i class="glyphicon glyphicon-map-marker effect-1" aria-hidden="true"></i></a>
								</div>
								<h4>Wedding Location</h4>
								<p>Maggie and I first met in Bristol. I’m sure she must have thought my fashion sense quite strange, especially as at the time I was wearing a bright orange hammock. </p>
							</div>
							<div class="col-md-4 details-grid">
								<div class="icon">
									<i class="glyphicon glyphicon-folder-close effect-1" aria-hidden="true"></i>
								</div>
								<h4>Gift Registry</h4>
								<p>Maggie and I first met in Bristol. I’m sure she must have thought my fashion sense quite strange, especially as at the time I was wearing a bright orange hammock. </p>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
		</div>
		<!--footer-->
			<div class="footer-section">
				<div class="container">
					<div class="footer-grids">
						<div class="col-md-6 footer-grid">
							<p>&copy; 2016 Conjugal. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
							<div class="social-icons">
								<a href="#"><i class="icons"></i></a>
								<a href="#"><i class="icons1"></i></a>
								<a href="#"><i class="icons2"></i></a>
								<a href="#"><i class="icons3"></i></a>
							</div>
						</div>
						<div class="col-md-6 footer-grid">
							<div class="footer-left">
								<ul>
									<li>Vestibulum iaculis</li>
									<li>Proin dictum</li>
									<li>Lacinia est</li>
									<li>Nulla venenatis</li>
									<li>Consequat ante</li>
								</ul>
							</div>
							<div class="footer-left">
								<ul>
									<li>Enim adipiscing</li>
									<li>Lacinia est</li>
									<li>Proin dictum</li>
									<li>Consequat ante</li>
									<li>Nulla venenatis</li>
								</ul>
							</div>
							<div class="footer-left">
								<ul>
									<li>Consequat ante</li>
									<li>Proin dictum</li>
									<li>Nulla venenatis</li>
									<li>Enim adipiscing</li>
									<li>Lacinia est</li>
								</ul>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<a href="#head" class="scroll top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></a>
				</div>
			</div>
			
	<!--footer-->
</body>
</html>
